<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<template>
	<div class="login-wrap">
		<div class="ms-login">
			<div class="ms-title">智慧农业大棚管理系统
			</div>
			<el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
				<el-form-item prop="username">
					<el-input v-model="param.username" placeholder="username">
						<el-button slot="prepend" icon="el-icon-lx-people"></el-button>
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input type="password" placeholder="password" v-model="param.password"
						@keyup.enter.native="submitForm()">
						<el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
					</el-input>
				</el-form-item>
				<div class="login-btn">
					<el-button type="success" plain @click="submitForm('login')">登录</el-button>
				</div>
				<div class="register-btn">
					<el-row>
					  <el-button :span="12" @click="register()" style="width: 48%" type="success" plain>注册</el-button>
					<!-- </el-row>
					<el-row :gutter="20"> -->
					  <el-button :span="12" @click="forgetpw()" style="width: 48%" type="success" plain>忘记密码</el-button>
					</el-row>
				</div>

			</el-form>
		</div>
	</div>
</template>

<script>
	import {
		LoginInfo
	} from '../../api/index.js';
	import {
		Logintest
	} from '../../api/index.js';

	export default {
		data: function() {
			return {
				param: {
					username: '',
					password: '',
				},
				rules: {
					username: [{
						required: true,
						message: '用户名不能为空',
						trigger: 'blur'
					},{
						validator: (rule, value, callback) => {
							  var usernamereg = /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/im;
							  //console.log(usernamereg.test(value))
							  if (usernamereg.test(value)) {
							    callback(new Error('用户名里不可包含特殊字符'))
							  }
							  else{
							    callback()
							  }
							} 
					}],
					password: [{
						required: true,
						message: '密码不能为空',
						trigger: 'blur'
					},
					{
						trigger: 'blur',
						validator: (rule, value, callback) => {
						  var passwordreg = /(?![A-Z]*$)(?![a-z]*$)(?![0-9]*$)(?![^a-zA-Z0-9]*$)/
						  console.log(passwordreg.test(value))
						  if (!passwordreg.test(value)) {
						    callback(new Error('密码至少由大小字母、数字、特殊符号中的2种组成!'))
						  }
						  else{
						    callback()
						  }
						} 
					},],
				},
			};
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						Logintest(this.param).then(res => {
							console.log(res.code)
							if (res.code == 200) {
								this.$message.success('登录成功');
								localStorage.setItem('ms_username', this.param.username);
								this.$router.push('/dashboard');
							} else if(res.code==500){
								this.$message.error("密码错误!")
							} else {
								this.$message.error('用户名错误');
								//console.log('error submit!!');
								return false;
							}
						});
						// registerinfo(this.rulesForm).then(res => {})
						// localStorage.setItem('ms_username', this.rulesForm.username);
						// this.$router.push('/login');
						//console.log(res);
					} else {
						console.log('error submit!!');
						return false
					}
				});
			
			},
			register() {
				localStorage.setItem('ms_username', 'admin');
				this.$router.push('/register');
			},
			forgetpw() {
				localStorage.setItem('ms_username', 'admin');
				this.$router.push('/changepassword');
			},
		},
	};
</script>

<style scoped>
	.login-wrap {
		position: relative;
		width: 100%;
		height: 100%;
		background-image: url(../../assets/img/dap_bj.jpg);
		opacity: 0.7;
		background-size: 100%;
	}

	.ms-title {
		width: 100%;
		line-height: 50px;
		text-align: center;
		font-size: 20px;
		color: #228B22;
		border-bottom: 1px solid #ddd;
	}

	.ms-login {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 350px;
		margin: -190px 0 0 -175px;
		border-radius: 5px;
		background:#FDF5E6;
		overflow: hidden;
	}

	.ms-content {
		padding: 30px 30px;
	}

	.login-btn {
		text-align: center;
	}

	.login-btn button {
		width: 100%;
		height: 36px;
		margin-bottom: 10px;
	}

	.register-btn {
		text-align: center;
	}

	.register-btn button {
		width: 100%;
		height: 36px;
		margin-bottom: 10px;
	}

	.changepw-btn {
		text-align: center;
	}

	.changepw-btn button {
		width: 100%;
		height: 36px;
		margin-bottom: 10px;
	}

	.login-tips {
		font-size: 12px;
		line-height: 30px;
		color: #fff;
	}
	  .el-row {
	    margin-bottom: 20px;
	    &:last-child {
	      margin-bottom: 0;
	    }
	  }
	  .el-col {
	    border-radius: 4px;
	  }
	  .bg-purple-dark {
	    background: #99a9bf;
	  }
	  .bg-purple {
	    background: #d3dce6;
	  }
	  .bg-purple-light {
	    background: #e5e9f2;
	  }
	  .grid-content {
	    border-radius: 4px;
	    min-height: 36px;
	  }
	  .row-bg {
	    padding: 10px 0;
	    background-color: #f9fafc;
	  }
</style>